<template>
    <view>
        <view class="logo" :style="'top:' + statusBarHeight + 'px'">
            <image @click="goBack()" src="@/static/left.png"></image>
            <text>云相册</text>
        </view>
        
        <view class="u-page" :style="'margin-top:' + navHeight + 'px'">
            <u-list
                @scrolltolower="scrolltolower"
                :height='windowHeight - navHeight - 40'
            >
                <u-list-item class="item"
                    v-for="(item, index) in indexList"
                    :key="index"
                >
                    <image @click="onPrview(item)" :src="item.image_url" mode="aspectFill"></image>
                </u-list-item>
            </u-list>
        </view>
    </view>
</template>

<script>
    import { systemInfo } from '@/common/mixin.js'
    export default {
        mixins: [systemInfo],
        data() {
            return {
                type: 1,
                indexList: [],
                page: 1,

            }
        },
        onLoad(options) {
            this.type = options.type || 1
            this.getSystemInfo();
            this.loadmore();
        },
        methods: {
            goBack() {
                uni.navigateBack();
            },
            scrolltolower() {
                this.loadmore()
            },
            loadmore() {
                let that = this
                that.$API.getYunList({type: this.type, page: that.page}).then(res => {
                    if (that.page == 1) {
                        that.indexList = [];
                    }
                    res.data.data.forEach(v => {
                        that.indexList.push(v);
                    })
                    that.page += 1;
                });
            },
            onPrview(item) {
                uni.previewImage({
                    current: 0,
                    urls: [item.image_url]
                })
            }
        },
        onShareAppMessage() {
            return {
              title: '青梅产业大会云相册',
              path: '/pages/index/yun'
            }
        },
        onShareTimeline() {
            return {
              title: '青梅产业大会云相册',
              path: '/pages/index/yun'
            }
        }
    }
</script>

<style>
page {
    background: linear-gradient(180deg, #F6FBEE 0%, #C5E5E1 100%);
}
</style>
<style lang="scss">
    .logo {
        position: relative;
        left: 38rpx;
        display: flex;
        align-items: center;
        padding-top: 5rpx;
        image {
            width: 52rpx;
            height: 52rpx;
            margin-right: 12rpx;
            margin-top: 15rpx;
        }
        text {
            height: 52rpx;
            line-height: 52rpx;
            font-size: 36rpx;
            font-weight: bold;
            margin-top: 15rpx;
        }
    }
    .u-page {
        position: relative;
        width: 670rpx;
        margin: 0 auto;
        .u-list {
            view {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .u-list-item {
                    width: 218rpx;
                    height: 218rpx;
                    border-radius: 16rpx;
                    overflow: hidden;
                    margin-bottom: 8rpx;
                    image {
                        width: 218rpx;
                        height: 218rpx;
                        border-radius: 16rpx;
                    }
                }
            }
        }
    }
</style>
